<!-- 登录面板 -->
<template>
  <div class="panel">
    <!-- 登录面板 -->
    <el-tabs type="border-card" stretch v-model="activeName" class="tabs">
      <!--账号登录  -->
      <el-tab-pane label="账号登录" name="account">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon class="icon">
              <user />
            </el-icon>
            <span>账号登录</span>
          </span>
        </template>
        <!-- 输入框 -->
        <login-account-vue ref="accountRef" />
      </el-tab-pane>
      <!--手机登录  -->
      <el-tab-pane label="手机登录" name="phone">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon class="icon">
              <cellphone />
            </el-icon>
            <span>手机登录</span>
          </span>
        </template>
        <!-- 输入框 -->
        <login-phone-vue ref="phoneRef" />
      </el-tab-pane>
    </el-tabs>
    <!--  记住密码 -->
    <div class="pwd_group" v-if="activeName === 'account'">
      <remember-password :rememberPwd="isRemPwd" @remPwd="handleRemPwd"></remember-password>
      <span class="forgetPwd"   >忘记密码?</span>
    </div>
    <!-- 登录 -->
    <div class="submit">
      <div class="btn_submit_login">
        <el-button type="primary" @click="handleLogin()">登录</el-button>
        <el-button @click="handleResetForm()">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import LoginAccountVue from './login-account.vue'
import LoginPhoneVue from './login-phone.vue'
import RememberPassword from '@/base-ui/remember-account-radio/index.vue'

// 枚举类型 account 为账号登录 phone位手机登录
const activeName = ref<string>('account')
const isRemPwd = ref<boolean>(false)


const accountRef = ref<InstanceType<typeof LoginAccountVue>>()
const phoneRef = ref<InstanceType<typeof LoginPhoneVue>>()

// 记住密码
const handleRemPwd = (v: boolean) => {
  isRemPwd.value = v
}
// 登录按钮
const handleLogin = () => {
  if (activeName.value === 'account') {
    accountRef.value?.loginAction(isRemPwd.value)
  } else if (activeName.value === 'phone') {
    phoneRef.value?.loginAction()
  }
}
// 重置按钮
const handleResetForm = () => {
  if (activeName.value === 'account') {
    accountRef.value?.resetForm()
  } else if (activeName.value === 'phone') {
    phoneRef.value?.resetForm()
  }
}
</script>
<style lang="less" scoped>
.panel {
  width: 400px;
  background: #fff;
  text-align: center;
  border-radius: 12px;
  overflow: hidden;

  .el-tabs--border-card {
    border: none;
    box-shadow: none;
  }

  .icon {
    display: inline-block;
    margin-right: 10px;
  }

  .tabs {
    border-radius: 12px 12px 0 0;
  }

  .pwd_group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    font-size: 12px;

    .forgetPwd {
      display: inline-block;
      margin-left: 30px;
      color: #ccd3de;
      // color: #42a5f5;
      cursor: pointer;
    }
  }

  .submit {
    margin: 30px 0;
  }
}
</style>
